<template>
	<div class="marsk"
		v-if="visible">
		<div class="modal-wrap">
			<div class="title">
				<slot name=title>提示</slot>
			</div>
			<div class="body">
				<slot name=body>提示内容</slot>
			</div>
			<div class="footer">
				<button class="confirm" @click="$emit('on-ok')">确定</button>
				<button class="cancel" @click="$emit('on-candel')">取消</button>
			</div>
		</div>
	</div>
</template>
<script>
	// 控制组件的显示隐藏

	// 需要用到vue的知识

	// 1.slot
	// 2.父子传参
	// 3.子父传参

	// 1.需要控制这个组件的显示和隐藏 设计一个属性visible 来控制

	// 2.内容需要灵活的展示 根据不同的需要显示不投的组件内容

	// 3.点击确定按钮和点击取消的时候 需要触发相应的函数回调 点击任意一个按钮之后都需要关闭状态框
	export default {
		props: {
			visible: {
				type: Boolean,
				default() {
					return false
				}
			}
		}
	}
</script>
<style scoped>
.marsk {
	background-color: rgba(0, 0, 0, 0.6);
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	align-items: center;
}

.modal-wrap {
	border-radius: 10px;
	background-color: #fff;
	width: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.marsk .title,
.marsk .footer,
.marsk .body {
	margin: 20px 0;
}

button {
	outline: none;
	border: 0;
	width: 120px;
	height: 30px;
	background: linear-gradient(90deg, #1596fb, #002dff);
	border-radius: 0.28571429rem;
	/* border: block; */
	color: #fff;
	cursor: pointer;
	margin: 0 10px;
}

button:hover {
	background: deepskyblue;
}

.cancel {
	background: linear-gradient(90deg, #90fb15, #ff5100);
}

h3,
h1 {
	margin: 0;
}
</style>